import Vue from 'vue'
import VueI18n from "vue-i18n"; // 引入vue实例

import ElementUILocale from 'element-ui/lib/locale'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

// vue使用vue-i18n
Vue.use(VueI18n)

const DEFAULT_LANG = 'zh' // 默认语言为英文
const LOCALE_KEY = 'language' // localStorage来存放的key，名字随便定，接下来会用到。

const locales = { // 引入zh.json以及en.json
  zh: require('./zh.json'),
  en: require('./en.json'),
  vn: require("./vn.json")
}

const i18n = new VueI18n({ // 创建带有选项的 VueI18n 实例
  locale: DEFAULT_LANG, // 语言标识，在这里默认为en,即为英文
  messages: locales // 语言包，上边创建的json文件
})

const UIlocales = {
  zh: zhLocale,
  en: enLocale
}

// 通过判断lang语言标志符来return先对应的语言
const setUIlocales = lang => {
  switch (lang) {
    case 'zh':
      return UIlocales.zh
    case 'en':
      return UIlocales.en
    case 'vn':
      return UIlocales.vn
  }
}


export const setup = (lang) => { //切换语言的函数，lang为语言标识，en或者zh
                                 // 在此判断lang的值，如果未定义，则让lang默认为DEFAULT_LANG，目的是为了让用户在未选择语言的时候默认为英文。
  if (lang == undefined) {
    lang = window.localStorage.getItem(LOCALE_KEY)
    if (locales[lang] == undefined) {
      lang = DEFAULT_LANG
    }
  }
  console.log(lang)
  // 若lang有值，那么存入localStorage中，key为LOCALE_KEY,value为lang。
  window.localStorage.setItem(LOCALE_KEY, lang)
  Object.keys(locales).forEach(item => {
    document.body.classList.remove('lang-${item}')
  })
  document.body.classList.add('lang-${lang}')
  document.body.setAttribute('lang', lang)

  Vue.config.lang = lang
  i18n.locale = lang

  ElementUILocale.use(setUIlocales(lang))
}

setup()
export default i18n
